<template>
	<view class="container">
		<!-- <view class="container-title">
	  	请选择您的反馈类型
	  </view> -->
		<!-- 竖向菜单列表 -->
		<view class="menu-list">
			<view v-for="(item, index) in menuItems" :key="index" class="menu-item" @click="onMenuItemClick(item)">
				<!-- 菜单文字 -->
				<text class="menu-text">{{ item.name }}</text>
				<!-- 右箭头图标 -->
				<image src="@/static/img/godtail.png" mode="widthFix" class="arrow-icon"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 菜单项数据
				menuItems: [{
						id: 0,
						name: '营业执照',
						path: '/page_wallet/qualificationInfo'
					},
					{
						id: 1,
						name: '广播电视节目制作经营许可证',
						path: '/page_wallet/qualificationInfo'
					},
					{
						id: 2,
						name: '网络文化经营许可证',
						path: '/page_wallet/qualificationInfo'
					},
					{
						id: 3,
						name: '联网备案信息',
						path: '/page_wallet/qualificationInfo'
					},
					{
						id: 4,
						name: '营业性演出许可证',
						path: '/page_wallet/qualificationInfo'
					},
					{
						id: 5,
						name: '京ICP备11043884号',
						path: '/page_wallet/qualificationInfo'
					},
				]
			};
		},
		methods: {
			// 菜单项点击事件
			onMenuItemClick(item) {
				uni.navigateTo({
					url: item.path + '?id=' + item.id // 跳转到对应页面
				});
			}
		}
	};
</script>

<style>
	.container {
		height: 100vh;
		background: #f2f2fa;
	}

	.container-title {
		font-size: 32rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.menu-list {
		box-sizing: border-box;
		padding: 0 20rpx;
		background-color: #fff;

		.menu-item {
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f5f5f5;
		}

		.menu-item:last-child {
			border-bottom: none;
		}

		.menu-text {
			font-size: 32rpx;
			color: #333;
		}

		.arrow-icon {
			width: 18rpx;
			height: 18rpx;
		}
	}
</style>